<template>
  <div class="login">
    <!-- form -->
    <el-form :model="form" :rules="rules" ref="login">
      <!--
         组件：el-form-item
        作用：代表一行一行的表单选项，主要是统一加【label和表单开启验证等】
        属性：label  这个表单选项标签文本
        然后：可以在【el-form-item】选项里面 写具体的【表单标签 el-input、el-select】
        -->
      <el-form-item>
        <h1>B2C电商管理系统</h1>
      </el-form-item>
      <el-form-item prop="question">
        <el-select v-model="form.question" placeholder="请选择密保问题">
          <el-option label="你讲师的名字" value="神龙教主"> </el-option>
          <el-option label="你初恋的名字" value="你猜"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="answer">
        <el-input v-model="form.answer" placeholder="请输入密保答案" clearable>
          <i slot="prefix" class="el-icon__icon el-icon-lock"></i>
        </el-input>
      </el-form-item>
      <el-form-item prop="username">
        <el-input v-model="form.username" placeholder="请输入用户名" clearable>
          <i slot="prefix" class="el-icon__icon el-icon-user"></i
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="form.password"
          placeholder="请输入密码"
          clearable
          show-password
        >
          <i slot="prefix" class="el-icon__icon el-icon-lock"></i>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          class="otherLogin wx el-icon-camera-solid"
          @click="handleWxLoginOpen"
        ></el-button>
        <el-button
          type="primary"
          class="otherLogin sms el-icon-mobile-phone"
          @click="onSubmit"
        ></el-button>
        <el-button
          type="primary"
          class="otherLogin token el-icon-pear"
          @click="onSubmit"
        ></el-button>
        <el-button type="primary" class="loginBtn" @click="onSubmit"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
    <!-- form -->

    <!-- 微信扫码登录弹框 -->
    <el-dialog
      title="扫码登录 "
      :visible.sync="isShowWxLogin"
      width="60%"
      :before-close="handleWxLoginClose"
    >
      <span>后期这边放一个二维码</span>
    </el-dialog>
    <!-- 微信扫码登录弹框 -->
  </div>
</template>
<script>
export default {
  data() {
    // 自定义验证规则
    const username = (rule, value, callback) => {
      //value就是用户输入的数据，你可以写正则判断
      // 成功 callback（）
      // 失败 callback（new Error(‘错误信息’)） 红色框
      // if (value.tostring().length < 3 || value.tostring().length > 12) {
      //     callback(new Error('  只能3-12个字符'))
      // } else {
      //     callback()
      // }
      if (/^\w{3,12}$/g.test(value)) {
        callback();
      } else {
        // 切记必须是这个格式，这样才可以给表单加红色框框
        callback(new Error("请输入3-12位英文，数字，下划线组合字符"));
      }
    };
    // 返回对象
    return {
      // 微信登录
      isShowWxLogin: false,
      // 表单数据统一管理(并且因为使用了el-form所以还得给他加一个model属性)
      form: {
        question: "",
        answer: "",
        username: "",
        password: "",
      },
      // 表单验证规则
      rules: {
        // 键 - 值
        // 键：规则名 推荐同表单双向绑定模型名
        // 值：数组 里面是一个个对象 一个个验证规则 语法根据手册写 固定的
        // 对象格式:{type:‘验证数据类型’，required,true,min:3,max:8,message:'验证失败提示信息'，trigger：‘blue/change’}
        question: [
          { required: true, message: "请输入密保问题", trigger: "change" },
        ],
        answer: [
          { required: true, message: "请输入密保答案", trigger: "blur" },
          { min: 2, max: 8, message: "只能输入2-8个字符", trigger: "blur" },
        ],
        // username: [
        //   { required: true, message: "请输入用户名", trigger: "blur" },
        //   { min: 2, max: 12, message: "只能输入2-12个字符", trigger: "blur" },
        // ],
        username: [
          {
            //validator 代表自定义验证规则
            // validator值-是变量 在data函数中定义，必须是函数类型，有三个形参 rule，value，callback
            validator: username,
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 2, max: 12, message: "只能输入2-12个字符", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    // 微信扫码登录弹框
    handleWxLoginOpen(done) {
      this.isShowWxLogin = true;
    },
    handleWxLoginClose(done) {
      done();
      // this.$confirm("确认关闭？");
      // .then((_) => {
      //   done();
      // })
      // .catch((_) => {});
    }, // 登录
    onSubmit() {
      //   console.log("submit!");
      this.$refs.login.validate((isSucces) => {
        if (isSucces) {
          //   alert("待请求接口");
          this.$message.success("表单验证成功，待请求接口");
        } else {
          // 不管
          this.$message.error("表单验证有误");
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background: #2d3a4b;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-form {
    width: 300px;
    text-align: center;
    color: #fff;
    h1 {
      font-size: 32px;
    }
    .el-select {
      width: 100%;
    }
    .loginBtn {
      width: 100px;
    }
  }
}
</style>
